<template>
  <div class="woker_bench">
    <div class="smart_party_build">
      <div class="header">智慧党建</div>
      <div class="icon_list">
        <icon-item :isOpen="item.isOpen" v-for="item in wokerList" :link="item.link" :src="item.icon"
                   :text="item.text"></icon-item>
      </div>
    </div>
  </div>
</template>

<script setup lang='ts'>
import { ref } from 'vue';
import iconItem from './components/iconItem/iconItem.vue';
import tzfw from '@/assets/img/tzfw.png'
import djyw from '@/assets/img/djyw.png'
import ljdw from '@/assets/img/ljdw.png'
import zzsh from '@/assets/img/zzsh.png'
import dwgs from '@/assets/img/dwgs.png'
import luyx from '@/assets/img/luyx.png'
import dfjn from '@/assets/img/dfjn.png'
import ldjsc from '@/assets/img/ldjsc.png'
import { IWoker } from './type';
const wokerList = ref<IWoker[]>([
  {
    text: '党建要闻',
    icon: djyw,
    link: '/important-news',
    isOpen: true,
  },
  {
    text: '通知发文',
    icon: tzfw,
    link: '/notice-news',
    isOpen: true,

  },
  {
    text: '廉洁党务',
    icon: ljdw,
    isOpen: true,
    link: '/clean-party'
  },
  {
    text: '组织生活',
    icon: zzsh,
    isOpen: true,
    link: '/organize-active'
  },
  {
    text: '东吴故事',
    icon: dwgs,
    isOpen: true,
    link: '/dw-story'
  },
  {
    text: '两优一先',
    icon: luyx,
    isOpen: true,
    link: '/vangurad-position'
  },
  {
    text: '党费缴纳',
    icon: dfjn,
    isOpen: true,
    link: '/pay'
  },
  {
    text: '领导驾驶舱',
    icon: ldjsc,
    isOpen: true,
    link: '/driving-cabin'
  }
])

</script>

<style lang='less' scoped>
.woker_bench {
  height: 100%;
  background-color: #f4f6f7;
  padding: 0 10px;
  overflow: auto;

  .smart_party_build {
    background-color: #fff;
    border-radius: 6px;
    margin-top: 10px;

    .header {
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #9CA0A3;
      text-align: left;
      padding: 10px 15px 0 7px;
      box-sizing: border-box;
    }

    .icon_list {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-gap: 10px;
      padding: 10px 0 15px 0;
    }
  }
}
</style>